<template>
  <div class="video-player-container">
    <div class="header">
      <h1><i class="fas fa-video"></i> Vue M3U8视频播放器</h1>
      <p class="description">基于Vue和阿里云PrismPlayer构建的HLS流媒体播放器，支持M3U8格式视频播放</p>
    </div>
    <div class="player-container">
      <div v-if="loading" class="loading">
        <div class="spinner"></div>
        <p>视频加载中，请稍候...</p>
      </div>
      <div id="player-con"></div>
      
      <div class="video-controls">
        <button class="btn btn-secondary" @click="goBack">
          <i class="fas fa-arrow-left"></i> 返回
        </button>
        <button class="btn" @click="changeVideo('low')">
          <i class="fas fa-tv"></i> 低清视频
        </button>
        <button class="btn" @click="changeVideo('medium')">
          <i class="fas fa-tv"></i> 中清视频
        </button>
        <button class="btn btn-primary" @click="changeVideo('high')">
          <i class="fas fa-tv"></i> 高清视频
        </button>
        <button class="btn" @click="toggleFullScreen">
          <i class="fas fa-expand"></i> 全屏切换
        </button>
      </div>
    </div>
    
    <div class="info-panel">
      <h2><i class="fas fa-list"></i> 视频列表</h2>
      <div class="video-list">
        <div 
          v-for="(video, index) in videoList" 
          :key="index" 
          :class="['video-item', { active: currentVideo === video.id }]"
          @click="selectVideo(video)"
        >
          <h3>{{ video.title }}</h3>
          <p>{{ video.description }}</p>
        </div>
      </div>
    </div>
    
    <div class="info-panel">
      <h2><i class="fas fa-info-circle"></i> 关于M3U8格式</h2>
      <div class="info-content">
        <p>M3U8是HTTP Live Streaming（HLS）协议使用的索引文件格式，由Apple公司提出。它将整个流分成多个小文件来下载，客户端会按顺序播放这些小的媒体文件。</p>
        
        <div class="features">
          <div class="feature">
            <h3><i class="fas fa-bolt"></i> 自适应码率</h3>
            <p>HLS支持自适应比特率流播，根据网络条件自动切换视频质量。</p>
          </div>
          <div class="feature">
            <h3><i class="fas fa-mobile-alt"></i> 跨平台兼容</h3>
            <p>在iOS、Android和大多数现代浏览器中都有良好的支持。</p>
          </div>
          <div class="feature">
            <h3><i class="fas fa-shield-alt"></i> 容错性强</h3>
            <p>由于使用HTTP协议，能够穿透大多数防火墙，且具有较好的容错能力。</p>
          </div>
        </div>
        
        <div class="m3u8-details">
          <h3>M3U8技术特点</h3>
          <ul>
            <li><strong>分片传输:</strong> 将视频文件分割成多个小片段，支持边下载边播放</li>
            <li><strong>多码率支持:</strong> 同时提供多种清晰度版本，适应不同网络环境</li>
            <li><strong>无缝切换:</strong> 播放过程中可根据网络状况动态切换码率</li>
            <li><strong>安全性:</strong> 支持AES-128加密，保护视频内容不被非法获取</li>
            <li><strong>标准协议:</strong> 基于HTTP协议，穿透性强，部署简单</li>
          </ul>
          
          <h3>应用场景</h3>
          <div class="use-cases">
            <div class="use-case">
              <i class="fas fa-film"></i>
              <h4>在线视频平台</h4>
              <p>适用于各类视频网站和点播平台</p>
            </div>
            <div class="use-case">
              <i class="fas fa-broadcast-tower"></i>
              <h4>直播服务</h4>
              <p>支持低延迟直播和大规模并发观看</p>
            </div>
            <div class="use-case">
              <i class="fas fa-mobile-alt"></i>
              <h4>移动端播放</h4>
              <p>原生支持iOS Safari和Android WebView</p>
            </div>
            <div class="use-case">
              <i class="fas fa-tv"></i>
              <h4>OTT服务</h4>
              <p>适用于智能电视和机顶盒等设备</p>
            </div>
          </div>
          
          <h3>技术优势</h3>
          <div class="advantages">
            <div class="advantage-item">
              <i class="fas fa-check-circle"></i>
              <div>
                <h4>广泛兼容性</h4>
                <p>在所有主流平台和设备上都有良好的支持</p>
              </div>
            </div>
            <div class="advantage-item">
              <i class="fas fa-sync-alt"></i>
              <div>
                <h4>自适应播放</h4>
                <p>根据网络带宽自动调整视频质量</p>
              </div>
            </div>
            <div class="advantage-item">
              <i class="fas fa-shield-alt"></i>
              <div>
                <h4>内容保护</h4>
                <p>支持加密传输，防止内容盗链</p>
              </div>
            </div>
            <div class="advantage-item">
              <i class="fas fa-bolt"></i>
              <div>
                <h4>快速启动</h4>
                <p>分片加载机制实现快速播放开始</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <p>© 2023 Vue M3U8视频播放器 | 基于Vue和阿里云PrismPlayer构建</p>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'video',
  // 添加head配置以确保正确加载阿里云播放器资源
  head() {
    return {
      link: [
        { rel: 'stylesheet', href: 'https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css' }
      ],
      script: [
        { src: 'https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js', body: true }
      ]
    }
  },
  data() {
    return {
      player: null,
      loading: true,
      currentVideo: 'medium',
      // 修改videoSources从URL参数中提取视频地址
      videoSources: {
        low: this.$route.params.direct,
        medium: this.$route.params.direct,
        high: this.$route.params.direct
      },
      videoList: [
        {
          id: 'low',
          title: '示例视频（低清）',
          description: '低分辨率演示视频，适合低速网络环境'
        },
        {
          id: 'medium',
          title: '示例视频（中清）',
          description: '中等分辨率演示视频，平衡画质和流畅度'
        },
        {
          id: 'high',
          title: '示例视频（高清）',
          description: '高分辨率演示视频，提供最佳观看体验'
        }
      ]
    }
  },
  mounted() {
    // 确保脚本已加载后再初始化播放器
    this.checkAliplayerLoaded();
  },
  methods: {
    // 检查Aliplayer是否已加载
    checkAliplayerLoaded() {
      if (typeof Aliplayer !== 'undefined') {
        this.initPlayer();
      } else {
        // 如果未加载，等待一段时间后重试
        setTimeout(() => {
          this.checkAliplayerLoaded();
        }, 100);
      }
    },
    initPlayer() {
      try {
        this.player = new Aliplayer({
          "id": "player-con",
          "source": this.videoSources[this.currentVideo],
          "width": "100%",
          "height": "500px",
          "autoplay": false,
          "isLive": false,
          "rePlay": false,
          "playsinline": true,
          "preload": true,
          "language": "zh-cn",
          "controlBarVisibility": "hover",
          "useH5Prism": true,
          "h5Url": "https://g.alicdn.com/de/prismplayer/2.8.0/hls/aliplayer-vod-min.js"
        }, (player) => {
          console.log("播放器创建成功");
          this.loading = false;
          
          // 监听播放事件
          player.on('play', () => {
            console.log('视频开始播放');
          });
          
          // 监听结束事件
          player.on('end', () => {
            console.log('视频播放结束');
          });
          
          // 监听错误事件
          player.on('error', (error) => {
            console.error('播放错误:', error);
            alert('视频播放出错，请尝试切换视频源或检查网络连接');
          });
        });
      } catch (error) {
        console.error('播放器初始化失败:', error);
        // 失败后重试
        setTimeout(() => {
          this.initPlayer();
        }, 500);
      }
    },
    changeVideo(quality) {
      if (this.videoSources[quality]) {
        this.loading = true;
        this.currentVideo = quality;
        this.player.loadByUrl(this.videoSources[quality]);
        
        // 模拟加载延迟
        setTimeout(() => {
          this.loading = false;
        }, 1500);
      }
    },
    selectVideo(video) {
      this.changeVideo(video.id);
    },
    toggleFullScreen() {
      if (this.player.getIsFullScreen()) {
        this.player.cancelFullScreen();
      } else {
        this.player.requestFullScreen();
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  beforeDestroy() {
    // 组件销毁前释放播放器资源
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

<style scoped>
.video-player-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 修改背景样式，完全避免影响页面布局和滚动 */
.video-player-container::before {
  content: '';
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: -1;
  opacity: 0.8;
  /* 使用absolute定位并设置具体尺寸，避免影响页面滚动 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.description {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

.player-container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

#player-con {
  border-radius: 10px;
  overflow: hidden;
}

.video-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

.btn {
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  background: #ff6b6b;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
  background: #4ecdc4;
}

.btn-primary:hover {
  background: #38b2ac;
}

.btn-secondary {
  background: #6c757d;
}

.btn-secondary:hover {
  background: #5a6268;
}

.info-panel {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
}

.info-panel h2 {
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.info-content {
  line-height: 1.6;
}

.info-content p {
  margin-bottom: 15px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.feature {
  flex: 1;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.feature h3 {
  margin-bottom: 10px;
  color: #4ecdc4;
}

.video-list {
  margin-top: 20px;
}

.video-item {
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

.video-item.active {
  background: rgba(78, 205, 196, 0.3);
  border-left: 4px solid #4ecdc4;
}

.footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  opacity: 0.8;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  flex-direction: column;
  gap: 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 5px solid #4ecdc4;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 新增关于M3U8格式的样式 */
.m3u8-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.m3u8-details h3 {
  color: #4ecdc4;
  margin: 20px 0 15px 0;
  font-size: 1.4rem;
}

.m3u8-details ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.m3u8-details li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 15px 0;
}

.use-case {
  text-align: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.use-case i {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #4ecdc4;
}

.use-case h4 {
  margin: 10px 0 5px 0;
  color: #fff;
}

.advantages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 15px 0;
}

.advantage-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.advantage-item i {
  color: #4ecdc4;
  font-size: 1.5rem;
  margin-top: 5px;
}

.advantage-item h4 {
  margin: 0 0 5px 0;
  color: #fff;
}

@media (max-width: 768px) {
  .video-controls {
    flex-direction: column;
  }
  h1 {
    font-size: 2rem;
  }
}
</style>